<template>
  <div>
    <div style='margin:50px 0 0 50px'>
      <el-button @click='dialogFormVisible=true'>添加角色</el-button>
    </div>
    <el-table
      :data="tableData"
      :row-key="getRowKeys"
      :expand-row-keys="expands"
      @expand-change='expand'
      style="width: 100%">
      <el-table-column 
        type="expand"
      >
        <template slot-scope="props">
              <el-transfer
                filterable
                :filter-method="filterMethod"
                filter-placeholder="请输入关键字"
                v-model="value"
                :titles="['Source', 'Target']"
                :data="data">
              </el-transfer>
              <br  />
              <el-button size="small" type='primary' @click="submit(props.row.id)">提交</el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="角色名"
        prop="character">
      </el-table-column>
      <el-table-column
        label="公司">
        <template slot-scope="scope">
          {{ office_name(scope.row.office) }}
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="输入角色信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="角色名" :label-width="formLabelWidth">
          <el-input v-model="form.character" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司" :label-width="formLabelWidth">
          <el-select v-model="form.office_id" placeholder="请选择">
            <el-option
              v-for="item in office_list"
              :key="item.id"
              :label="item.office"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit_add">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>

<script>
import {
  right_get,
  character_get,
  character_post,
  character_right_get,
  character_right_post,
  office_get,
} from "../axios_api/api";
export default {
  data() {
    return {
      formLabelWidth: "120px",
      form: {
        character: "",
        office_id: 0,
      },
      dialogFormVisible: false,
      office_list:[],
      getRowKeys(row) {
        return row.id;
      },
      expands: [10],
      data: [],
      value: [],
      filterMethod(query, item) {
        return item.label.indexOf(query) > -1;
      },
      tableData: []
    };
  },
  mounted() {
    this.get_charcters();
    this.get_rights();
    this.get_office();
  },
  methods: {
    submit_add(){
      console.log(this.form)
      character_post(this.form).then(resp=>{
        this.$message(resp.message)
        if(resp.data==200){
          this.$router.go(0)
        }
      })
    },
    // 获取公司列表
    get_office(){
      office_get().then(resp=>{
        this.office_list = resp.data
      })
    },
    // 展开单元行
    expand(row, expandedRows) {
      this.child_loading = true;
      var that = this;
      if (expandedRows.length) {
        that.expands = [];
        if (row) {
          that.expands.push(row.id);
        }
      } else {
        that.expands = [];
      }
      // 请求详细数据
      character_right_get({ character_id: row.id }).then(resp => {
        console.log(resp.data);
        this.value = [];
        for (var i = 0; i < resp.data.length; i++) {
          this.value.push(resp.data[i].id);
        }
        console.log(this.value);
      });
    },
    // 提交修改
    submit(id) {
      var data = { character_id: id, right_id_list: this.value };
      character_right_post(data).then(resp => {
        this.$message(resp.message);
        if (resp.code == 200) {
          this.$router.go(0);
        }
      });
    },
    //分情况渲染公司名
    office_name(office) {
      if (office) {
        return office.office;
      } else {
        return "全局";
      }
    },
    // 获取权限列表
    get_rights() {
      right_get().then(resp => {
        console.log(resp);
        for (let i = 0; i < resp.data.length; i++) {
          let data = resp.data[i];
          let item = {};
          item["disabled"] = false;
          item["key"] = data.id;
          item["label"] = data.desc;
          this.data.push(item);
        }
      });
    },
    // 获取角色列表
    get_charcters() {
      character_get().then(resp => {
        this.tableData = resp.data;
      });
    }
  }
};
</script>
<style>
</style>
